﻿<p>
This example shows how to implement related grids. The first grid is bound to the Customers table from the Northwind database.
The second shows the orders for the selected customer from the first grid.
</p>
<p>
    The example is implemented using the <strong>Action</strong> overload which supplies additional data to the action 
    method which provides data for the grid and the <strong>rebind</strong> JavaScript method. Here is the relevant code:
</p>
<pre class="prettyprint">
&lt;%= Html.Telerik().Grid&lt;Order&gt;()
        .Name("Orders")
        <em>.Ajax(ajax => ajax.Action("_RelatedGrids_Orders", "Grid", new { customerID = "ALFKI" }))</em>
        .Columns(columns=>
        {
             columns.Add(c => c.OrderID).Width(100);
             columns.Add(c => c.OrderDate).Width(200).Format("{0:dd/MM/yyyy}");
             columns.Add(c => c.ShipAddress);
             columns.Add(c => c.ShipCity).Width(200);
        })
        .Pageable()
        .Sortable()
        .BindTo((IEnumerable&lt;Order&gt;)ViewData["Orders"])
%&gt;
</pre>
<pre class="prettyprint">
&lt;script type="text/javascript"&gt;
    <span class="code-highlight">var ordersGrid = $('#Orders').data('tGrid');</span>
    $('#Customers tbody tr')
        .live("click", function() {
            // `this` == clicked row
            var customerID = this.cells[0].innerHTML; 
            
            // add selected style to clicked row
            $(this).addClass('t-state-selected')
                   .siblings()
                   .removeClass('t-state-selected');
            // update ui text
            $('#customerID').text(customerID);
            
            // rebind the related grid
            <em>
            ordersGrid.rebind({
                customerID: customerID
            });
            </em>
        })
&lt;/script&gt;
</pre>
